<template>
    <div class="p-tab p-tab-discover-colors">
        <v-container grid-list-xs text-xs-center fluid>
            <p class="subheading pb-3">
                This is a very first draft for a "Discover" area where you can find photos by
                color, by similarity, by season or just randomly. Feedback and contributions welcome.
            </p>

            <v-layout row wrap class="p-colors">
                <v-flex
                        v-for="(color, index) in colors"
                        :key="index"
                        class="p-color pa-2"

                        xs3 d-flex grow
                >
                    <v-hover>
                        <v-card :to="{name: 'photos', query: { color: color.name }}" :dark="useDark(color)"
                                :color="color.example" slot-scope="{ hover }" :flat="!hover"
                                class="p-clickable py-1">
                            <v-card-text class="px-0 py-5 body-2">{{ color.label }}</v-card-text>
                        </v-card>
                    </v-hover>
                </v-flex>
            </v-layout>
        </v-container>
    </div>
</template>

<script>

    export default {
        name: 'p-tab-discover-colors',
        data() {
            return {
                readonly: this.$config.getValue("readonly"),
                colors: this.$config.values.colors,
                labels: {},
            };
        },
        methods: {
            useDark(color) {
                switch (color.name) {
                    case "white":
                        return false;
                    default:
                        return true;
                }
            }
        },
        created() {
        },
    };
</script>
